<!-- 无缝滚动表格-->
<template>
  <div :id="props.id" class="production-swiper-table">
    <!-- 表格外层开始 -->
    <div class="table-wrapper" >
      <!-- 表头开始 -->
      <div class="table-header" v-if="props.showHeader">
        <span class="table-header-item" v-for="(item, index) in tableOption.widths" :key="index" :style="{'width': tableOption.widths[index]}">{{
            tableOption.titles[index] }}</span>
      </div>
      <!-- 表头结束 -->
      <!-- 表格内容开始 -->
      <div class="table-content">
        <vue3-seamless-scroll class="wrap" :list="tableOption.tableData" :class-option="props.classOption" hover :wheel="true">
          <ul class="ul-item">
            <li v-for="(item, index) in tableOption.tableData" :key="index" class="li-item">
              <span v-for="(v, i) in item" :key="i" class="li-item-content"
                    :style="{'width': tableOption.widths[i]}">
                {{ item[i]}}
              </span>
            </li>
          </ul>
        </vue3-seamless-scroll>
      </div>
      <!-- 表格内容结束 -->
    </div>
    <!-- 表格外层结束 -->
  </div>
</template>

<script setup lang="ts" name="HzTableScroll">
import {Vue3SeamlessScroll}  from "vue3-seamless-scroll";
import {loadEchartsData} from "/@api/hz-bigscreen-api";
import {defineExpose} from "vue";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: 'hz-table-scroll'
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'tableScroll'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  },
  classOption: {
    type: Object,
    default: () => {
      return {
        // singleHeight: 30,
        step: 1,
      };
    },
  },
  tableData: { // 表格数据
    type: Array,
    default: () => [
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
      [ "123", "测试1", "50*50*50", "test", "200.00", "10.00", "10.00", "已读", "10%"],
    ],
  },
  titles: { //表头
    type: Array,
    default: () => [
      "编号",
      "产品名称",
      "大小",
      "部门",
      "计划数",
      "已成交",
      "值",
      "状态",
      "完成率",
    ],
  },
  widths: { //每列宽度
    type: Array,
    default: () => [
      "20%",
      "10%",
      "10%",
      "10%",
      "10%",
      "10%",
      "10%",
      "10%",
      "10%",
    ],
  },
  // 是否展示表格头
  showHeader: {
    type: Boolean,
    default: true,
  },
})

const tableOption = ref({
  titles: props.titles,
  widths: props.widths,
  tableData: props.tableData
})

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  tableOption.value.titles = data.titles
  tableOption.value.widths = data.widths
  tableOption.value.tableData = data.tableData
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  refreshChartsByApi
});

</script>
<style lang="scss" scoped>
.production-swiper-table {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: white;

  .table-wrapper {
    position: absolute;
    top: 10px;
    width: 100%;
    height: 100%;

    .table-header {
      display: flex;
      align-items: center;
      margin: 0 auto;
      height: 10%;
      width: 98%;
      background: #05076b;
      opacity: 1;
      border: 0.01rem solid #3655da;

      .table-header-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        height: 100%;
        line-height: 100%;
        white-space: nowrap;
      }
    }

    .table-content {
      width: 98%;
      height: 90%;
      margin: 0 auto;

      .wrap {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;
          li {
            display: flex;
            align-items: center;
            background: rgba(10, 149, 255, 0.6);
            .li-item-content {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

        }
      }
    }
  }
}


.li-item {
  height: 50px;
}
.ul-item {
  height: 100%;
}
</style>
